<!-- 栏目组件 -->
<!-- 栏目组件 -->
<!-- 栏目组件 -->
<template>
  <div class="icons">
    <!-- 引入swiper实现轮播 -->
    <swiper :options="swiperOptions" >
      <!-- 循环到底有多少个轮播页面 页面由v-for控制-->
      <swiper-slide v-for="(page, key) of pages" :key="key">
        <!-- 这里循环的数据也不是iconList了 是page-->
        <div class='icon' v-for='item of page' :key='item.id'>
          <div class='icon-img'>
            <img class='icon-img-icons' :src='item.imgUrl'>
          </div>
          <p class='icon-desc'>{{ item.desc }}</p>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'HomeIcons',
  props: {
    iconsList: Array
  },
  data () {
    return {
      swiperOptions: {
        // 轮播图不自动滚动
        autoplay: false,
        observer: true
      }
    }
  },
  computed: {
    pages () {
      const pages = []
      /**
       * 对iconList的每一项进行循环，循环会接受到两个参数
       * 1.具体的循环项   2.循环项对应的下标
       */
      this.iconsList.forEach((item, index) => {
        /**
         * 调用Math.floor()方法向下取整假：
         * 设是第三个数据，index对应的是2，那么page就等于0，凡是0-7的数据都为零，就让他们都展示在第一页上
         * 如果是第九个数据，那么index对应的就是8，page就等于1，然后就让等于1的数据都展示在第二页上
         * ps：相当于创造一个二维数组，每一维里是八个数据
         */
        const page = Math.floor(index / 8)
        /**
         * page算出来做一个判断：
         * 1.判断pages[page]存不存在（pages数组对应的下标里边 有数据就存在，如果没有就不存在）
         *   如果不存在就赋予空数组一直在当前这个下标上添加数据，直到page取下一个数为止
         *   例如：pages[0] 里边有数据就一直添加，一旦page改变为1，那就要再次赋予空数组继续在pages[1]里边添加数据
         */
        if (!pages[page]) {
          pages[page] = []
        }
        // 每一项得数据，添加在对应的pages[page]里
        pages[page].push(item)
      })
      // 最后返回 pages数组
      return pages
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/publicStyle.styl'
  @import '~styles/mixins.styl'
  // 因为swiper拖动的区域为icons的区域所以造成了没图标的地方拖着没反应，使用穿透解决
  .icons >>> .swiper-container
    height 0
    padding-bottom 50%
  .icons
    background $bgWhite
    padding-top .1rem
    .icon
      position relative
      overflow hidden
      float left
      width 25%
      height 0
      padding-bottom 25%
      .icon-img
        position absolute
        top 0
        left 0
        right 0
        bottom .40rem
        box-sizing border-box
        padding .1rem
        .icon-img-icons
          display block
          height 1.1rem
          width 1.1rem
          margin 0 auto
      .icon-desc
        position absolute
        left 0
        right 0
        bottom .2rem
        height .44rem
        line-height .44rem
        text-align center
        // 实现文本过长隐藏突出的内容并以...显示
        // 因为其他地方也需要用到此方法，所以就把他封装在了styl文件中
        ellipsis()
        color $darkTextColor
</style>>
